El otro día hablábamos de un generador de imágenes de carga, no sé si habréis dado cuenta que en la sidebar aparece una imagen que desaparece cuando la página ya está cargada en su totalidad.
Devil me preguntaba la forma de agregarla al blog en un principio le proporcioné un script para añadirlo a la plantilla.
Aún así lo consulté con J.Miur su opinión siempre es acertada como acertada la solución.
El me sugirió lo siguiente:
Debemos situarnos en Plantilla/Edición de HTML y justo antes de </head> añadiremos lo siguiente:

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("imgLOAD").style.display="none";
}
</script>


Guardamos los cambios y nos dirigimos a Plantilla/Añadir un elemento de página/HTML/Javascript

Añadimos lo siguiente:

<div id="imgLOAD" style="text-align:center;">
<img src="aquí-url-de-la-imagen "/></div>



En loader generator y Ajax-indicators también encontréis bonitas imágenes de carga.
Clicando sobre la imagen podemos escoger el color de la imagen, del fondo y tamaño.
Doktor Gnómegang

Saludos!

Pues ya esta, ya lo puse en mi blog y funciona de maravilla. Aun asi, es posible personalizar la imagen de carga de Loader Generator cambiandola por otro gif animado de tu preferencia. Yo lo hice asi y me quedo bien.
Tambien andando por tu blog descubri los codigos para quitar las horribles lineas de los enlaces, ya los puse y quedaron perfectos. Dos mas que te debo. Danke Schön, Domo Arigato.
Ponmelos en la cuenta please.

Chao

:-))

Responder
Jose, a secas

Buena entrada. La enterior sobre las imagenes de carga no la lei.

Mira esto (aunque se que no te gusta, lo siento)

Un saludo

Responder
Gem@

Saludos Dr. Gnomegang me gusta como estás personalizando el blog y los cambios que has realizado.
!Que bien que vas encontrando aquí soluciones¡ :)

JmpaSrgc No lo sientas, no es que no me guste... ¿A quién no le gusta que se acuerden de uno y más referente a estas cosas?
Lo que ocurre... bueno tu ya lo sabes :) sois muchos y todos, todos... merecen una nominación especial.
Por cierto... hicimos telepatía yo hablaba de ti en esta entrada y tú me nombras a mi ¿qué rizo será el siguiente?

Responder
Markos Horro

Hola muy buen hack , lo probe y tal y me gusto.
Pero no es exacto lo que quería ( no te voy a exigir nada). Lo que yo queria esque te saliese una ventanita dentro de la página con ese mensaje de cargando...pero da igual no te preocupes

Saludos!!! ;)

Responder
Gem@

...Markos... una ventanita no sé si saldrá pero hay forma de hacerlo para que sea visible en el centro de la página. Se trata de un script

Responder
Markos Horro

Muchas gracias por tu atención , nunca fallas!!!!

Responder
Gem@

Ya lo creo que si Markos como todo el mundo y más de lo que me gustaría :D

Responder
Devil

Gem@: Ahora si me gustó. Apliqué a mi blog una imagen de descarga que carga en la side bar y despué desaparece.
Sos una genia!

Responder
Devil

Ah! Ya te pongo en mi Blogroll. Un saludo.

Responder
Gem@

!Hola Devil¡ que bien que te ha gustado :)
(He visto ese hotel que maravilla :D )

Responder
Unknown

Hola Gema:
Me encantan los cambios que has hecho en el blog, está quedando super.
En cuanto a este truco, te diré que lo hice, pero nunca desaparece, siempre está ahí :(
Que puede ser?
Besos Key ^_^

Responder
Gem@

Hola Key, lo único que puede ser es que olvidaras añadir el script en la plantilla y la imagen de carga la tienes añadida como una imagen normal (sin efecto) :(

Responder
Anónimo

Hola Gema!
tengo un problema...la imagen no desaparece que puedo hacer, antes si me resultaba pero no se que le paso al blog que la imagen no se desaparece :(
ayuda por favor :)
bye!

Responder
Gem@

Camila mira si la tienes añadida como una simple imagen (en ese caso no pararía nunca) o si la añadiste con el código "div id="imgLOAD" style=..... "

Responder
Gem@

Solucionado un problema en el segundo código ;)

Responder
"@LFioMmC"

heyy gema esto esta aspero graxias por tu coperacion att: 911xtreme.blogspot.com
visita nos un dia y das tu opinion de esto jeje chauu

Responder
Luis

Gracias Gem@ por el truco, lo he publicado tambien en mi blog, dando como via a este blog y el de J.Miur

Saludos

Responder
Gem@

Gracias 911cobe por el comentario. A ti también Luis, te agradezco que citaras la fuente de la información aunque no he podido verlo ya que no tienes el perfil disponible.

Responder
Anónimo

Sorry!!
Gem@ puedes checarlo en la dirreccion del nombre de este comentario (en este comentario no utilizo la cuenta de blogger)

Saludos

Responder
Gem@

Perfecto ;)

Responder
juan

Intente ponerlo pero no se si puedo ponerlo enviame un mail con otro modo mi mai les juangeido@hotmail.com

Responder
Gem@

Es una de las formas más sencillas Juan, deberás buscar el código </head>en tu plantilla y justo antes añadir el script.

Luego donde añadimos a la columna (añadir elementos de página)clicas y buscas una pestaña donde dice..HTML/Javascript dentro de esa pestaña añadirás el segundo código.
En ese mismo código que añades sustituyes aquí-url-de-la-imagen por la url de la imagen de carga que previamente habrás subido a un servidor puede ser POR EJEMPLO http://www.imageshack.us/

Te contesto aquí también por si aclara las dudas a alguien ;)

Responder
Nachio

Otra forma -que a mi parecer es mejor porque es mucho más visible para los usuarios- es hacerlo que aparezca la imagen de carga al medio de la página y no en la sidebar.

Hacerlo no es tan diferente como lo explicaste Gema:

1. Poner después del <head> el siguiente script: <script type='text/javascript'>
function negative(id) {
document.getElementById(id).style.display=&#39;none&#39;
}
</script>

2. Después buscar en la plantilla <body> y reemplazarla por <body background='imagen.jpg' leftmargin='0' link='null' onload='negative("cargando")' topmargin='0' vlink='null'>

3. Por último, luego del código que cambiaste por body, agregarle <div id='cargando' style='position:fixed; z-index:2; top: 270px; left: 400px; background-color: null ; layer-background-color: null ; border: px double null; font-size: 30px; null; height:50px'>
<p align='center' style='margin-top: 0; margin-bottom: 0'>
<img src='imagendecarga.gif'/></p>
</div>

Nota: en "imagendecarga.gif" cambialé por la imagen que te guste y modifica los valores de "height" en el código anterior.

Espero que lo entiendan y les sirva.

Bye!

http://www.blogdeshowmatch.com

Responder
Gem@

PatinandoBlog he probado de la forma que me dices, y funciona perfectamente, también es cierto que queda tan visible como de la forma que yo he explicado ya que cuando agregamos la imagen por medio de un elemento de página la estamos agregando a cualquier parte de nuestro blog con la función de arrastrar la etiqueta, ya sea en el main como en el header o la sidebar.

La forma que tu has explicado me parece genial porque la imagen la incluimos en cualquier parte incluido dentro del mismo logo.
Haré referencia a este método.
Gracias una vez más ;)

Responder
Unknown

Gema, aplicar la imagen de carga ha sido algo bueno para un blog con tantas fotografías de gran tamaño como www.alicantevivo.org, pero tenía una "flotante" en la esquina inferior derecha, invitando a hacer comentarios, y ha desaparecido.

Además, en www.barriodebenalua.es (otro blog que también llevo, similar, pero a escala de barrio), la imagen flotante me queda por debajo de la cabecera (arriba a la derecha).

Podrías darme una pista para arreglarlo cuando puedas?? gracias!

Responder
Unknown

Gema, ya he podido arreglarlo, he encontrado este otro código y ya va perfecto: http://gemablog-.blogspot.com/2008/04/imagen-flotante-aleatoria.html

cuando acaba la imagen de "cargando" aparece el flotante.
perfecto

gracias de todos modos!!!

Responder
Gem@

Me alegra que lo resolvieras Rubén, muchos blogs no muestran las imágenes hasta que la carga está completa (en el mío también ocurre con las franjas laterales)

Responder
::Z3CK::

hola che quiero poner los comentarios q tenes vos haci! debajo de cada posteo, como se hace??
salu2

Responder
Gem@

::Z3CK:: Mostrar comentarios en la misma entrada. ;)

Responder
ahustin torres

hola gema
grasias a todos tus trucos y codigos soble blogger pude personalizar mi blog asique si me das tu permiso me gustaria agradeserte poniendo un link de tu pagina en la mia junto con otra que me ayudo
cuando termine de personalizar mi blog te doy el enlase por ahora no quiero que lo veas

Responder
ahustin torres
Este comentario ha sido eliminado por el autor.
Responder
ahustin torres
Este comentario ha sido eliminado por el autor.
Responder
Gem@

Por supuesto que tienes mi permiso Games :)

Responder
Anónimo

Hola Gema!
Ahi lo agregué pero me aparece el gif en la sidebar mientras se ven algunas partes del blog cargadas y otras por cargar.
Mi idea era poner el gif en el centro antes que este todo cargado el blog o bien una pantalla de precarga, se puede hacer esto?

Muchas gracias
Saludos
Christian

Responder
Gem@

Anónimo te aparece en la sidebar pero puedes arrastrar esa etiqueta hasta el centro del blog bien debajo del header o del crosscol.
La imagen sale nada más comienza la carga de la página y termina cuando está cargada del todo.
Sobre la pantalla de precarga lo único que me viene a la mente ahora es crear un blog de forma que se muestre sólo la imagen de carga pero esa imagen siempre cargará la página donde se encuentra.

Responder
Anónimo

Muchas gracias Gema!
A ver como le doy forma a esto que me decis

Saludos
Christian

Responder
Gem@

De nada Christian, cualquier duda me dices algo ;)

Responder
Anónimo

hola gema, te queria preguntar, si tengo un gif con numeros que va del 1 al 100 y quiero que valla avansando a medida que va cargando el blog, como puedo hacer?

Responder
Gem@

yz Si se trata de una sola imagen no hay problema la numeración irá avanzando hasta que termine de cargar la página.

Responder
pureswing

Hola Gem, le puse manos a la obra y me sale esto en el blog

javascript:void(0)

Bueno y otra vez necesito que me rescates :(

Responder
Gem@

:: djzorro puedes editar el gadget donde añadiste la imagen de carga y eliminar eso, suele pasar cuando arrastramos el ratón a un iframe, que se cuela código.
Si pruebas aquí mismo verás que arrastrando los emoticones al formulario aparece parte del código ;)

Responder
Prof. Cesar S.

Quisiera poder aplicar una imagen de carga, justo al principio del blogger, y que el resto este detras de una imagen transparente gris, algo asi como una ventana modal, donde se vea la iamgen de carga justo al centro de la pantalla y atras en semi transparente el blogger cargando, ¿sera esto posible?

Responder
Gem@

:: Prof. de Música lo que me describes da la sensación que es una ventana modal, como su nombre indica es una ventana donde se muestra contenido y mientras carga la página muestra una imagen de carga:
http://gemablog-.blogspot.com/2009/05/lytebox-otra-forma.html
Si es otra cosa siento no haberte entendido :S

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top